<template>
  <view class="information-con">
    <scroll-view scroll-y="true" ref="scrollView" style="flex: 1; overflow: auto">
      <view>
        <view class="information-card" style="margin-bottom: 10px;">
          <view class="order-tit">
            退款信息
          </view>
          <u-line color="#ECECEC"></u-line>
          <view class="info-list">
            <view class="info-left">
              <view class="info-item">
                <text class="label">门店名称</text>
                <text class="value">{{info.deptName}}</text>
              </view>
              <view class="info-item">
                <text class="label">申请时间</text>
                <text class="value">{{info.applicantDate}}</text>
              </view>
              <view class="info-item">
                <text class="label">退款商品总数</text>
                <text class="value">{{info.quantity}}</text>
              </view>
              <view class="info-item">
                <text class="label">退款方式</text>
                <text class="value" v-if="info.paymentMethod==0"> 微信支付</text>
                <text class="value" v-if="info.paymentMethod==1"> 支付宝支付</text>
                <text class="value" v-if="info.paymentMethod==2"> 现金支付</text>
                <!-- <text class="value">微信支付</text> -->
              </view>
              <view class="info-item">
                <text class="label">退款时间</text>
                <text class="value">{{ info.refundDate ? info.refundDate : '-' }}</text>
              </view>
              <view class="info-item">
                <text class="label">退款原因</text>
                <text class="value">{{info.reason}}</text>
              </view>
            </view>
            <view class="info-right">
              <view class="info-item">
                <text class="label">退款类型</text>
                <text class="value">{{info.type==0?'整单退':'部分退'}}</text>
              </view>
              <view class="info-item">
                <text class="label">退款总额</text>
                <text class="value" style="color:#0F90FD">{{ info.refund ? info.refund : '-' }}</text>
              </view>
              <view class="info-item">
                <text class="label">退款状态</text>
                <text class="value" style="color:#5BBE1E">{{info.status==0?'待退款':'已退款'}}</text>
              </view>
              <view class="info-item">
                <text class="label">退款申请人</text>
                <text class="value">{{ info.applicantName ? info.applicantName : '-' }}</text>
              </view>
              <view class="info-item">
                <text class="label">退款审核人</text>
                <text class="value">{{ info.verifierName ? info.verifierName : '-' }}</text>
              </view>
            </view>
          </view>

        </view>
        <view class="information-card" style="margin-bottom: 10px;">
          <view class="order-tit">
            订单信息
          </view>
          <u-line color="#ECECEC"></u-line>
          <view class="info-list">
            <view class="info-left">
              <view class="info-item" @click="copyLink">
                <text class="label">订单号</text>
                <view class="value" style="display: flex;">{{info.orderId}}
                  <u-icon size="20" color="#0F90FD" name="file-text"></u-icon>
                </view>
              </view>
              <view class="info-item">
                <text class="label">订单状态</text>
                <text class="value">{{statusInfo[info.orderStatus]}}</text>
              </view>
              <view class="info-item">
                <text class="label">取餐方式</text>
                <text class="value" v-if="info.sceneCode=='pickup'">门店自提</text>
                <text class="value" v-if="info.sceneCode=='takeout'"> 外卖配送</text>
              </view>
              <view class="info-item" v-if="info.sceneCode=='takeout'">
                <text class="label">配送费</text>
                <text class="value">{{info.deliveryFee}}</text>
              </view>
              <view class="info-item">
                <text class="label">实付金额</text>
                <text class="value">{{info.actualAmount}}</text>
              </view>
              <view class="info-item">
                <text class="label">支付方式</text>
                <text class="value" v-if="info.paymentMethod==0"> 微信支付</text>
                <text class="value" v-if="info.paymentMethod==1"> 支付宝支付</text>
                <text class="value" v-if="info.paymentMethod==2"> 现金支付</text>
              </view>

            </view>
            <view class="info-right">
              <view class="info-item">
                <text class="label">订单来源</text>
                <text class="value">{{info.source==0?'微信小程序':'现场点单'}}</text>
              </view>
              <view class="info-item">
                <text class="label">订单商品总数</text>
                <text class="value">{{info.totalNum}}</text>
              </view>
              <view class="info-item">
                <text class="label">下单人</text>
                <text class="value">{{ info.buyerName ? info.buyerName : '-' }}</text>
              </view>
              <view class="info-item">
                <text class="label">订单总额</text>
                <text class="value" style="color:#0F90FD">{{info.actualReceipt}}</text>
              </view>
              <view class="info-item">
                <text class="label">下单时间</text>
                <text class="value">{{info.paymentTime}}</text>
              </view>
            </view>
          </view>

        </view>
        <view class="information-card" style="padding-bottom: 10px;">
          <view class="order-tit">
            退款商品
          </view>
          <u-line color="#ECECEC"></u-line>
          <view class="info-lists">
            <uni-table border stripe emptyText="暂无更多数据">
              <!-- 表头行 -->
              <uni-tr>
                <uni-th align="left">商品</uni-th>
                <uni-th align="left" :width="100">单价</uni-th>
                <uni-th align="left" :width="100">订单数量</uni-th>
                <uni-th align="left" :width="100">实付金额</uni-th>
                <uni-th align="left" :width="100">退款数量</uni-th>
                <uni-th align="left" :width="100">退款金额</uni-th>
                <uni-th align="left" :width="100">退款状态</uni-th>
              </uni-tr>
              <!-- 表格数据行 -->
              <uni-tr v-for="(item,index) in info.refundItemDtoList" :key="index">
                <uni-td>
                  <view style="display: flex;align-items: center;">
                    <image :src="item.mainImage" mode=""
                      style="width:32px;height: 32px;vertical-align: middle;margin-right:5px"></image>
                    <text>{{item.name}}</text>
                  </view>
                </uni-td>
                <uni-td>{{item.basePrice}}</uni-td>
                <uni-td>{{item.orderItemNum}}</uni-td>
                <uni-td>{{item.orderItemMoney}}</uni-td>
                <uni-td>{{item.refundNum}}</uni-td>
                <uni-td>{{item.refundItemMoney}}</uni-td>
                <uni-td>{{info.status==0?'-':'退款成功'}}</uni-td>

              </uni-tr>
            </uni-table>
          </view>
        </view>

      </view>

    </scroll-view>
    <view class="detail-foot" v-if="info.status==0">
      <view class="order-btn" @click="handelRefund">退款</view>
    </view>
    <!-- <customPopup v-if="showPopup" :showPopup="showPopup" :typePopup="typePopup" :titPopup="titPopup"
      :infoPopup="infoPopup" @cancelPopup="cancelPopup" @surePopup="surePopup" /> -->
  </view>
</template>
<script setup>
  // import customPopup from '@/components/customPopup/index.vue'
  import {
    ref,
    computed,
    defineProps,
    defineEmits,
    watch
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    refundSubmit
  } from '@/requests/apis/order'
  const emit = defineEmits(['parentRound']);
  const props = defineProps({
    detailInfo: Object,
  })
  let info = ref(props.detailInfo)
  let statusInfo = ref({
    0: '待支付',
    1: '待制作',
    2: '制作中',
    3: '待取餐',
    4: '待配送',
    5: '配送中',
    6: '已完成',
    7: '已取消',
  })
  watch(
    () => props.detailInfo,
    (newVal) => {
      info.value = newVal;
    }, {
      deep: true
    } // 深度监听对象内部变化
  );
  // let showPopup = ref(false)
  // let titPopup = ref('')
  // let typePopup = ref('')
  // let infoPopup = ref('')
  const handelRefund = () => {
    // showPopup.value = true
    // titPopup.value = '请输入退款确认码'
    // infoPopup.value = '请输入'
    emit('parentRound', info.value)
  }
  // const cancelPopup = () => {
  //   showPopup.value = false
  // }

  // // 弹窗确认
  // const surePopup =async () => {
  //   showPopup.value = false
  //   let res = await refundSubmit({
  //     orderId: orderItem.value
  //   })
  // }

  const copyLink = async () => {
    uni.setClipboardData({
      data: info.value.orderId,
      success: () => {
        uni.hideLoading();
        uni.showToast({
          title: '复制成功',
          icon: 'none'
        });
      },
      fail: (error) => {
        uni.hideLoading();
        console.error('复制失败', error);
      }
    });

  };
</script>
<style lang="scss" scoped>
  .information-con {
    display: flex;
    flex-direction: column;
    width: 100%;

    .detail-foot {
      width: 100%;
      background: #FFFFFF;
      box-shadow: 0px -2px 4px 0px rgba(51, 70, 129, 0.1);
      border-radius: 10px;
      height: 54px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 10px 0 20px;
      box-sizing: border-box;

      .order-btn {
        border-radius: 8px;
        background: #0F90FD;
        font-weight: 500;
        font-size: 12px;
        color: #fff;
        padding: 5px 27px;
        margin-right: 10px;
        box-sizing: border-box;
      }
    }

    .information-card {
      background-color: #fff;
      border-radius: 10px;
      box-sizing: border-box;

      .order-tit {
        padding: 9px 0 6px 10px;
        box-sizing: border-box;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }

      .info-lists {
        margin: 10px;
        // border: 1px solid #DCDCDC;
        box-sizing: border-box;

        :deep(.uni-table-tr) {
          background: #F0F6FF !important;
        }
      }

      .info-list {
        display: flex;
        padding: 10px 0;
        box-sizing: border-box;

        .info-left,
        .info-right {
          display: flex;
          flex: 1;
          flex-direction: column;
        }
      }

      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 30px;
        box-sizing: border-box;

        .label {
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          line-height: 30px;
          white-space: nowrap;
          margin-right: 10px;
        }

        .value {
          font-weight: 400;
          font-size: 12px;
          color: #333333;
          line-height: 30px;
          text-align: right;
        }
      }

    }
  }
</style>
